import React, { Fragment } from 'react'
import './index.less'
import Tabs from '../../components/Tabs'
import { tabsData } from 'libs/config'
import http from 'libs/http'
import { NoData } from 'components'

export default class extends React.Component {
  state = {
    tabsData,
    courseType: 0,
    challengeVos: [], // 每日挑战列表
    isPad: false,
  }

  componentDidMount() {
    this.getChallengeVos()
    this.getPlatformType()
  }

  getPlatformType = () => {
    const userAgent = navigator.userAgent
    const isPad = /pad/i.test(userAgent)
    this.setState({ isPad })
  }

  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState({
      tabsData, courseType
    }, this.getCommentsByTeacher)
  }

  // 获取每日挑战列表数据
  getChallengeVos = () => {
    const { courseType } = this.state
    http.get('/student/challenge/challengeVos', { courseType }).then(res => {
      this.setState({ challengeVos: res.data })
    })
  }

  // 点击今日挑战
  handleClick = tableId => () => {
    const showErrorNotice = false;
    const { isPad } = this.state
    if(isPad){
      let winRef1 = window.open("", "_blank")
      http.get('/student/challenge/challengeInfo', { tableId }, undefined, showErrorNotice).then(res => {
        const { id: challengeId } = res.data
        setTimeout(() => {
          winRef1.location = '/#/student_center_/my_courses/layout/daily_challenge_pad/'+challengeId
        }, 2000);
      }).catch(err => {
        setTimeout(() => {
          winRef1.location = '/#/student_center_/my_courses/layout/daily_challenge_pad/39'
        }, 2000);
      })
    }else{
      http.get('/student/challenge/challengeInfo', { tableId }, undefined, showErrorNotice).then(res => {
        const { id: challengeId } = res.data
        window.open('/#/student_center_/my_courses/layout/daily_challenge?challengeId='+challengeId)  
      })
    }
    
  }
  // pad端没日挑战
  openHomework = (challengeId) => {
    alert(challengeId)
    let winRef1 = window.open("", "_blank")
    setTimeout(() => {
      winRef1.location = '/#/student_center_/my_courses/layout/daily_challenge_pad/'+challengeId
    }, 2000);
  }
  render() {
    const { tabsData, challengeVos } = this.state
    return (
      <div className="daily-challenge">        
        {/* <Tabs
          tabsData={tabsData} 
          changeTab={this.changeTab}
          fontColor="#fff"
        /> */}
        {
          challengeVos.length > 0 ? (
            challengeVos.map(item => (
              <Fragment key={item.tableId}>
                <div className="daily-challenge-item">
                  <div>
                    <p>英语语法闯关大作战</p>
                    <p>挑战等级：<span>{item.level}</span></p>
                    <p>挑战规则：<span>每日只允许挑战一次，每次挑战5个关卡， 根据挑战成绩获得战者徽章</span></p>
                    <span onClick={this.handleClick(item.tableId)}>今日挑战</span>
                    <i className="english-icon"></i>
                  </div>
                </div>
              </Fragment>
            ))
          ) : (
            <div className="empty-data">
              <i></i>
              <p>立即免费试听，加入挑战者联盟！</p>
              <a href="/#/student_center/free_classes/layout/free">免费试听</a>
            </div>
          )
        }
        
      </div>
    )
  }
}